<template>
  <el-dialog :visible.sync="showDialog" title="添加题目" :close-on-click-modal="false">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <!-- <el-form-item label="ID：">
          <el-input v-model="queryParam.id"  clearable></el-input>
        </el-form-item> -->
      <el-form-item label="题型：">
        <el-select v-model="queryParam.filters[0].value">
          <el-option
            v-for="(val, key) in questionTypeEnum"
            :key="key"
            :value="+key"
            :label="val"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="_getQuestionList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="chapterName" label="章" show-overflow-tooltip />
      <el-table-column prop="sectionName" label="节" show-overflow-tooltip />
      <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip />
      <el-table-column prop="difficult" label="难度" show-overflow-tooltip />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParam.pageIndex"
      :limit.sync="queryParam.pageSize"
      @pagination="_getQuestionList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="confirmQuestionSelect">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { getQuestionList, detailQuestion } from '@/api/TeachingCenter/questionManage'
  import Pagination from '@/components/Pagination'
  import { mapGetters } from 'vuex'

  export default {
    components: { Pagination },
    props: {
      showQuestionDialog: Boolean,
      excludeIds: Array
    },
    data() {
      return {
        multipleSelection: [],
        tableData: [],
        queryParam: {
          pageNumber: 1,
          pageSize: 10,
          filters: [
            {
              value: 1,
              paramName: 'question_Type',
              paramOperator: 'EQ'
            }
          ]
        },
        total: 0,
        questions: []
      }
    },
    computed: {
      ...mapGetters(['subjectEnum', 'paperTypeEnum', 'questionTypeEnum']),
      showDialog: {
        get() {
          return this.showQuestionDialog
        },
        set(val) {
          this.$emit('update:showQuestionDialog', val)
        }
      }
    },
    created() {
      this._getQuestionList()
    },
    methods: {
      async _getQuestionList() {
        const { data } = await getQuestionList(this.queryParam)
        this.tableData = data.records.filter(({ id }) => {
          return this.excludeIds.indexOf(id) === -1
        })
        this.total = data.total
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      async confirmQuestionSelect() {
        const ids = this.multipleSelection.map(({ id }) => id)
        this.questions = []
        for (let index = 0; index < ids.length; index++) {
          const id = ids[index]
          const { data } = await detailQuestion(id)
          this.questions.push(data)
        }
        this.$emit('selectQuestions', this.questions)
      }
    }
  }
</script>
